import React, {Component} from 'react';
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  ImageBackground,
  TextInput,
  FlatList,
} from 'react-native';
import {powerRecord} from '../../api/index';
import {HeaderLeft, HeaderRight} from '../../components';
TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {
  defaultProps: false,
});
Text.defaultProps = Object.assign({}, Text.defaultProps, {
  allowFontScaling: false,
});
const {height, width} = Dimensions.get('window');
export default class CalculationHistory extends Component {
  static navigationOptions = ({navigation}) => ({
    headerStyle: {
      backgroundColor: '#fff',
      borderBottomWidth: 0,
      height: 44,
      elevation: 0,
    },
    headerTitleStyle: {
      flex: 1,
      textAlign: 'center',
      color: '#333',
      fontSize: 17,
      fontWeight: '400',
    },
    headerLeft: <HeaderLeft triggerBack={() => navigation.goBack()} />,
    headerRight: <HeaderRight />,
    headerBackTitle: null,
  });
  render() {
    return (
      <ScrollView>
        <View
          style={{
            marginTop: (12 / 667) * height,
            height: height,
            width: width,
            backgroundColor: '#FFFFFF',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Record />
        </View>
      </ScrollView>
    );
  }
}
class Record extends Component {
  constructor(props) {
    super();
    this.state = {
      operation: '',
      time: '',
      number: '',
      remarks: '',
      result: [],
    };
  }
  async getRecord() {
    const result = await powerRecord({pageNo: '1'});
    this.setState({result: result});
  }
  async componentDidMount(): void {
    await this.getRecord();
  }
  render() {
    const results = {
      data: [
        {
          operation: '邀请注册',
          time: '2019-09-28 10:23:09',
          number: '+339449.98',
          remarks: 'uid:0001234',
        },
        {
          operation: '邀请购买',
          time: '2019-09-28 10:23:09',
          number: '+339449.98',
          remarks: 'uid:0001234',
        },
        {
          operation: '完善资料',
          time: '2019-09-28 10:23:09',
          number: '+339449.98',
          remarks: '',
        },
        {
          operation: '购买产品',
          time: '2019-09-28 10:23:09',
          number: '+339449.98',
          remarks: '基因测序产品',
        },
      ],
      error_code: 0,
    };
    return (
      <FlatList
        data={this.state.result.data}
        renderItem={({item}) => (
          <View>
            <View
              style={{
                flexDirection: 'column',
                height: (78 / 667) * height,
                width: width,
              }}>
              <View style={{flexDirection: 'row', height: (43 / 667) * height}}>
                <View style={{width: width * 0.5}}>
                  <Text
                    style={{
                      marginLeft: (28.5 / 375) * width,
                      marginTop: (15 / 667) * height,
                      //fontFamily: 'MicrosoftYaHei',
                      fontSize: 14,
                      color: '#656565',
                      textAlign: 'left',
                    }}>
                    {item.reason}
                  </Text>
                </View>
                <View style={{width: width * 0.5}}>
                  <Text
                    style={{
                      marginLeft: (28.5 / 375) * width,
                      marginTop: (15 / 667) * height,
                      marginRight: (20 / 375) * width,
                      //fontFamily: 'MicrosoftYaHei',
                      fontSize: 14,
                      color: '#333333',
                      textAlign: 'right',
                    }}>
                    {item.amount}
                  </Text>
                </View>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  height: (35 / 667) * height,
                  width: width,
                }}>
                <View style={{width: width * 0.5, justifyContent: 'center'}}>
                  <Text
                    style={{
                      marginLeft: (28.5 / 375) * width,
                      //fontFamily: 'MicrosoftYaHei',
                      fontSize: 12,
                      color: '#656565',
                      textAlign: 'left',
                    }}>
                    {item.create_time}
                  </Text>
                </View>
                <View style={{width: width * 0.5, justifyContent: 'center'}}>
                  <Text
                    style={{
                      marginLeft: (28.5 / 375) * width,
                      marginRight: (20 / 375) * width,
                      //fontFamily: 'MicrosoftYaHei',
                      fontSize: 11,
                      color: '#999999',
                      textAlign: 'right',
                    }}>
                    {item.id}
                  </Text>
                </View>
              </View>
            </View>
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <View
                style={{
                  height: (0.5 / 667) * height,
                  width: (338 / 375) * width,
                  borderWidth: (0.5 / 667) * height,
                  borderColor: '#E5E5E5',
                  justifyContent: 'center',
                }}
              />
            </View>
          </View>
        )}
      />
    );
  }
}
